﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase
@{
    var _overflow = TabsOverflow;
}
<CascadingValue Value="this">
    <fluent-tabs @ref=Element
                 id="@Id"
                 class="@ClassValue"
                 style="@StyleValue"
                 orientation=@Orientation.ToAttributeValue()
                 activeid=@ActiveTabId
                 activeindicator="@(ShowActiveIndicator.ToString().ToLower())"
                 @ontabchange="HandleOnTabChangedAsync"
                 @attributes="AdditionalAttributes">
        @ChildContent
        @if (_overflow.Any())
        {
            <FluentBadge Id="@IdMoreButton" Appearance="Appearance.Neutral" Style="@StyleMoreValues" slot="end">
                @($"+{_overflow.Count()}")
            </FluentBadge>
        }
    </fluent-tabs>
    @if (_overflow.Any())
    {
        <FluentMenu Anchor="@IdMoreButton" Trigger="MouseButton.Left" Anchored="true">
            @foreach (var item in _overflow)
            {
                <FluentMenuItem Label="@item.Label" OnClick="@((e) => DisplayMoreTabAsync(item))" />
            }
        </FluentMenu>
    }
</CascadingValue>
